<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    class Button extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                liked: false
            };
//            ES6中 函数必须手动绑定
//            this.handleClick.bind(this);
        }


        handleClick() {
            this.setState({
                liked: !this.state.liked
            });
            console.log( this.state.liked )
        }

        render() {
            var text = this.state.liked ? "liked" : "has't liked";
            return (
                    <div>
                        <p onClick={this.handleClick.bind(this) }>
                        you {text} this button </p>
                    </div>
            )
        }

    }


    ReactDOM.render(
            <Button/>,
        document.getElementById('example')
    );
</script>
</body>
</html>

